// components/TouchImageChangePosition/TouchImageChangePosition.js

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    // 雪碧图图片地址
    imgSrc: {
      type: String,
      value: '',
    },
    // 初始化位置
    initPicNumber: {
      type: Number,
      value: 0,
    },
    // 图片帧数 注意：从0开始数
    totalPicNumber: {
      type: Number,
      value: 0,
    },
    // 每次步进的高度，也就是一帧的高度
    step: {
      type: Number,
      value: 0,
    },
    // 手指移动多少px就切换一张
    touchStep: {
      type: Number,
      value: 5,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    touch: null,
    // 移动的位置
    positionVal: 0,
    // 最长的长度
    MAX_POSITION: 0,
    // 最小0
    MIN_POSITION: 0,
    // 触摸移动定时器
    moveTimer: null,
    // 是否重置位置为初始标记
    isInit: false,
    // 重置位置定时器
    initTimer: null,
    // 背景图片地址
    bgImage: '',
    // 是否显示loading效果
    showLoading: true,
    // 是否显示报错
    showError: false,
  },
  lifetimes: {
    attached: function () {
      // 页面初始化的时候 初始化可移动最大值和初始值
      this.setData({
        MAX_POSITION: this.data.step * this.data.totalPicNumber,
        positionVal: this.data.step * this.data.initPicNumber
      })
      // 获取图片加载信息
      // this.getImgSrc()
    },
    ready: function () {
      
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 移动开始
    touchstart(e) {
      // 重置的时候不给移动
      if (this.data.isInit) return
      this.setData({
        touch: e.changedTouches[0]
      })
    },

    // 移动位置
    touchmove(e) {
      // 给限制 16毫秒移动一次
      if (this.data.moveTimer) return

      this.triggerEvent('touchmoveComponents', {
        data: '关闭生成中的窗口'
      })

      this.data.moveTimer = setTimeout(() => {
        if (!this.data.touch || this.data.isInit) return
        const clientX1 = this.data.touch.clientX
        const clientX2 = e.changedTouches[0].clientX
        const val = clientX2 - clientX1
        const stepVal = parseInt(val / this.data.touchStep)

        let positionVal = this.data.positionVal
        positionVal = this.data.positionVal + stepVal * this.data.step
        if (clientX2 > clientX1) {
          positionVal = Math.min(positionVal, this.data.MAX_POSITION)
        } else {
          positionVal = Math.max(positionVal, this.data.MIN_POSITION)
        }
        this.setData({
          positionVal,
          moveTimer: null,
        })
      }, 16)
    },

    // 移动结束
    touchend() {
      this.triggerEvent('touchendComponents', {
        data: '关闭生成中的窗口'
      })
      if (this.data.initTimer) return
      clearTimeout(this.data.moveTimer)
      this.setData({
        isInit: true,
        touch: null,
        moveTimer: null,
      })
      // 重置位置
      this.initPosition()
    },

    // 重置位置
    initPosition() {
      this.initTimer = setTimeout(() => {
        const initNum = this.data.step * this.data.initPicNumber
        let positionVal = this.data.positionVal
        if (initNum === positionVal) {
          clearTimeout(this.data.initTimer)
          this.setData({
            initTimer: null,
            isInit: false,
            touch: null,
          })
        } else {
          if (this.data.positionVal > initNum) {
            positionVal = positionVal - 500
          } else {
            positionVal = positionVal + 500
          }
          this.setData({
            positionVal
          })
          this.initPosition()
        }
      }, 16)
    },

    // 获取图片信息
    getImgSrc() {
      this.setData({
        showLoading: true,
        showError: false,
      })
      wx.getImageInfo({
        src: wx.getStorageSync('img_file'),
        success: ({
          path
        }) => {
          console.log("success");
          this.setData({
            showLoading: false,
            showError: false,
            bgImage: path
          })
        },
        fail: () => {
          console.log("fail");
          this.setData({
            showLoading: true,
            showLoading: false,
          })
        }
      })
    },
  }
})